Step 2 - Control the demo mode

In this step you create controls for the demo mode. The controls you create in this step allow you to manually control the position of the needles in the cluster. When you change the values manually, the application exits the demo mode. If you do not change any of the values for a set amount of time, the application returns to the demo mode.

Switch the demo mode on and off

In this section you create a state manager and a controller property which you use to switch the demo mode on and off.

To switch the demo mode on and off:

  1. In the Project select the RootPage node and in the State Tools click Create State Manager.
    You can find the State Tools window below the Preview window.
    Kanzi Studio creates a state manager and assigns it to the RootPage node.
  2. In the State Tools click Create State twice to create two states, double-click the name of each state, and rename the states.
    For example, name one state On and the other Off.
    The On state defines the state of your application when the demo mode is switched on, the Off state when the demo mode is switched off.
  3. In the State Tools click <No Controller Property> and select + Create Property Type.
    In a state manager the value of the property you select as the Controller Property defines the conditions when each state in a state group is active.
  4. In the Create Property Type window set:
  5. In the State Tools set the value of the controller property for each state. For the On state set the value to True, and for the Off state leave the value set to False.
  6. In the State Tools click Edit State Manager to deactivate the State Tools.
  7. In the Library > State Managers press Alt and right-click the RootPage State Manager > StateGroup > Off state and create State Object items:
  8. In the Library select each state object you created in the previous step and in the Properties set the Target Object Path property for each State Object:

    The Target Object Path property sets which node this State Object affects. Aliases #TurnIndicatorLeft and #TurnIndicatorRight point to the TurnIndicatorLeft and TurnIndicatorRight nodes.

  9. Copy all State Object items in the Off state and paste them to the On state.
  10. Move the On Timer triggers from the nodes to the State Object items you just created:
    1. In the Project select the RootPage node, in the Node Components > Triggers right-click the On Timer trigger, and select Copy.
    2. Right-click the On Timer trigger again and select Remove.
    3. In the Library > State Managers > RootPage State Manager > StateGroup > On state select the RootPage State Object, in the Node Components > Triggers section right-click, and select Paste Trigger.
    4. Repeat the procedure for the On Timer triggers in the TurnIndicatorLeft and TurnIndicatorRight nodes and their State Object items.

    When you move a property or a trigger from a node to a State Object which points to that node, you allow the State Object in that state manager to set the value. The property values and triggers set in a node override the values set by a state manager.

  11. In the Project select the RootPage node and in the Properties add the Demo.DemoMode property.
    By enabling and disabling the Demo.DemoMode property you enable and disable the demo mode in the application.

Control the position of the needles manually

In this section you create controls that allow you to manually control the position of the needles in the cluster.

To control the position of the needles manually:

  1. In the Project press Alt and right-click the RootPage node, select Stack Layout 2D, name it DemoControls, and move it between the BatteryNeedle and Gauges nodes.
    When you place the DemoControls node above the Gauges node, in the UI you can slide the controls under the Gauges node when you do not need them.
  2. In the Project select the DemoControls node and in the Properties add and set:
  3. In the DemoControls node create a Stack Layout 2D node, name it NeedleControls, and add and set its Vertical Alignment property to Center.
    The NeedleControls node positions the controls for each needle you create in the next step.
  4. Create the controls for each needle:
    1. In the NeedleControls node create a Stack Layout 2D node, name it Fuel, and in the Properties set the Direction property to Y.
    2. In the Assets set Source to Factory Content, drag the Slider slider to the Fuel node you created in the previous step, and name it Fuel.
      Factory Content assets contain ready-made components which you can use to create prototype projects faster.
    3. In the Project press Alt and right-click the Fuel Slider node and select Alias.
      Kanzi Studio creates an alias pointing to the node from which you created the alias and adds it to the resource dictionary of its nearest ancestor node that contains a resource dictionary. Here you use the alias for easy access to the node in the JavaScript script.
      TIP

      You can see in the Dictionaries window the list of resources in the resource dictionaries that the node selected in the Project can access.

    4. In the Project press Alt and right-click the Fuel Stack Layout 2D node, select Text Block 2D, name it FuelDescription, and in the Properties add and set:
      • Horizontal Alignment to Center
      • Font Size to 22
      • Text to Fuel
  5. Repeat the previous step to add to the NeedleControls node the controls for the Speed and Battery needles.
  6. In the Project select the Speed Slider node and in the Properties add and set the Maximum Value property to 240.
  7. In the Project select the Fuel and Speed Stack Layout 2D nodes and in the Properties add and set the Horizontal Margin Right property field to 50.
  8. Connect the sliders in the DemoControls node to the needles:
    1. In the Project select the FuelNeedle node and in the Properties click + Add Binding.
    2. In the Binding Argument Editor set:
      • Property to Render Transformation
      • Attribute to Rotation Z
      • Expression to 
        {#Fuel/RangeConcept.Value}-39
        You have to subtract 39 from the value of the property to correctly position the needle at value 0 on the gauge, when the value of the Fuel property is 0.
        TIP

        You can retrieve alias target nodes with bindings, the Kanzi Engine API, or scripting using the hash sign (#) followed by the name of the alias, regardless of the node location in the project.

      Click Save.
      With this binding you control the rotation around the z axis of the FuelNeedle node with the Fuel Slider slider in the DemoControls node.
  9. Repeat the previous step for the BatteryNeedle and SpeedNeedle nodes:
  10. Connect the Speed slider to the node that shows the current speed as a numerical value:
    1. In the Project select the RootPage > Gauges > SpeedView > SpeedValue node and in the Properties click + Add Binding.
    2. In the Binding Argument Editor set:
      • Property to Text
      • Expression to 
        INT({#Speed/RangeConcept.Value})
      Click Save.
      With this binding you show the current value of the Speed Slider node in the SpeedValue node.

Expand and collapse the manual controls

In this section you create a control which you use to expand and collapse the manual controls you created in the previous section.

To expand and collapse the manual controls:

  1. In the Project press Alt and right-click the DemoControls node and select Alias.
  2. In the Project press Alt and right-click the DemoControls node, select Toggle Button 2D, name it ExpandDemoControls, and in the Properties add and set:
  3. In the Project press Alt and right-click the ExpandDemoControls node, select Image, name it Arrow, and in the Properties add and set:
  4. In the Project select the ExpandDemoControls node, in the State Tools click Create State Manager to create a state manager, click Create State twice to create two states, and name one Expand and the other Collapse.
    The Expand state defines the state of your application when the manual controls are opened, the Collapse state when the menu controls are closed.
  5. In the State Tools click <No Controller Property> and select Button > Toggle State.
  6. In the State Tools set the value of the controller property for each state. For the Expand state set the value to 1, and for the Collapse state leave the value set to 0.
  7. In the State Tools click Edit State Manager to deactivate the State Tools.
  8. In the Project select the ExpandDemoControls node and in the Properties add and set the Toggle State property to 1.
    When you set the Toggle State Controller Property of the ExpandDemoControls node to 1, the panel with the controls for the gauges is shown by default when you start the application.
  9. Create and define the State Object items you want to control with this state manager:
    1. In the Library > State Managers press Alt and right-click the ExpandDemoControls State Manager > State Group > Collapse state and create these State Object items:
      • Arrow and in the Properties set the Target Object Path to Arrow.
      • DemoControls and in the Properties set the Target Object Path to #DemoControls.
    2. In the Library select the Arrow State Object, in the Properties add the Render Transformation property, and set its Rotation property field to 180.
    3. In the Library select the DemoControls State Object, in the Properties add the Render Transformation property, and set its Translation Y property field to -100.
  10. Repeat the previous step for the Expand state, but set:

Add a script that controls the demo mode

When you enable the demo mode the scripts take over the control over the position of the needles and the activation state of the turn indicators. In this section you add a script which switches off the demo mode to allow you to manually control the position of the needles in the cluster.

To add a script that controls the demo mode:

  1. In the Library press Alt and right-click Property Types and select Property Type.

    The Property Type Editor opens.
  2. In the Property Type Editor set:Click Save to create a property type with the properties you defined.
    You use this custom property type in the script you create in this section to keep track of the time when the application goes into the demo mode.
  3. In the Project select the RootPage node, in the Node Components > Triggers section right-click, select Add Trigger > General > On Timer, and set the Timer Interval (ms) of the trigger to 100.
  4. In the On Timer trigger add the Execute Script action, and in the Script Editor use this script
    var count = node.getProperty('Demo.TimeToDemo');

var speedNeedleSlider = node.lookupNode('#Speed');
var speedSliderValue = speedNeedleSlider.getProperty('RangeConcept.Value');

var batteryNeedleSlider = node.lookupNode('#Battery');
var batterySliderValue = batteryNeedleSlider.getProperty('RangeConcept.Value');

var fuelNeedleSlider = node.lookupNode('#Fuel');
var fuelSliderValue = fuelNeedleSlider.getProperty('RangeConcept.Value');

if(node.stateRecord == speedSliderValue + batterySliderValue + fuelSliderValue)
{
    node.setProperty("Demo.TimeToDemo", count + 1);
}
else
{
    node.setProperty("Demo.DemoMode", 0);
    node.setProperty("Demo.TimeToDemo", 0);
    count = 0;
}

if(count >= 20)
{
    
    node.setProperty("Demo.DemoMode", 1);
}

node.stateRecord = speedSliderValue + batterySliderValue + fuelSliderValue;

    When you use the sliders in the DemoControls node to manually set the values for the needles, this script exits the demo mode. If you do not change the values for any of the needles for the amount of time you set in the script, this script puts the application back into the demo mode.


< PREVIOUS STEP

What's next?

In this tutorial you learned how to use JavaScript scripts to create a demo mode for an application and how to create manual controls for the needles in the application. You can use the approach you learned in this tutorial to add the controls for the indicators.

You can also:

See also

Using scripts

Scripting reference

Creating state managers

Using triggers

Using aliases

Using bindings

Open topic with navigation